// 引入React
 import React from "react"
// 设计Dom渲染包
import ReactDom from "react-dom"
// 引入css
import './index.css'
// 在 JSX 中使用图片，先这样用
import avatar from './images/react.png'
const ele = (
  <div className="App">
            <div className="comment-container">
                <div className="comment-head"><span>1 评论</span></div>
                <div class="tabs-order">
                    <ul class="sort-container">
                        <li className="">按热度排序</li>
                        <li className="on">按时间排序</li>
                    </ul>
                </div>
                <div className="comment-send">
                    <div className="user-face"><img className="user-head" src={avatar} alt="" /></div>
                    <div className="textarea-container"><textarea cols="80" rows="5" placeholder="发条友善的评论" className="ipt-txt"></textarea><button className="comment-submit">发表评论</button></div>
                    <div className="comment-emoji"><i className="face"></i><span className="text">表情</span></div>
                </div>
                <div className="comment-list">
                    <div className="list-item">
                        <div className="user-face"><img className="user-head" src="https://y.qq.com/music/photo_new/T001R300x300M000003aQYLo2x8izP.jpg?max_age=2592000" alt="" /></div>
                        <div className="comment">
                            <div className="user">刘德华</div>
                            <p className="text">给我一杯忘情水</p>
                            <div className="info">
                                <span className="time">2021-10-10 09:09:00</span><span className="like liked"><i className="icon"></i></span><span className="hate"><i className="icon"></i></span
                                ><span className="reply btn-hover">删除</span>
                            </div>
                        </div>
                    </div>
                    <div className="list-item">
                        <div className="user-face"><img className="user-head" src="https://y.qq.com/music/photo_new/T001R500x500M0000025NhlN2yWrP4.jpg?max_age=2592000" alt="" /></div>
                        <div className="comment">
                            <div className="user">周杰伦</div>
                            <p className="text">听妈妈的话</p>
                            <div className="info">
                                <span className="time">2021-10-11 09:09:00</span><span className="like"><i className="icon"></i></span><span className="hate"><i className="icon"></i></span
                                ><span className="reply btn-hover">删除</span>
                            </div>
                        </div>
                    </div>
                    <div className="list-item">
                        <div className="user-face"><img className="user-head" src="https://y.qq.com/music/photo_new/T001R500x500M000003Nz2So3XXYek.jpg?max_age=2592000" alt="" /></div>
                        <div className="comment">
                            <div className="user">陈奕迅</div>
                            <p className="text">十年</p>
                            <div className="info">
                                <span className="time">2021-10-11 10:09:00</span><span className="like"><i className="icon"></i></span><span className="hate hated"><i className="icon"></i></span
                                ><span className="reply btn-hover">删除</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
)
ReactDom.render(ele,document.querySelector('#react'))